<template>
    <div class="content">
        <img src="../assets/fenge-5.jpg">
        <div class="box1">

            <div class="box2">
                <el-row >
                    <el-col :span="10" :offset="7" >
                <el-form :model="regForm" :rules="rules" label-width="100px" ref="regForm">
                    <el-form-item label="旧密码" prop="expassword">
                        <el-input v-model="regForm.expassword" type="password" placeholder="旧密码"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="password">
                        <el-input v-model="regForm.password" type="password" placeholder="新密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPassword">
                        <el-input v-model="regForm.checkPassword" type="password" placeholder="新密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="repassword">修改</el-button>
                        <el-button @click="resetForm('regForm')" >重置</el-button>
                    </el-form-item>
                </el-form>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        //自定义验证规则
        let validatePass1 = (rule, value, callback) => {
            // 6-16位, 数字, 字母, 字符至少包含两种, 同时不能包含中文和空格
            let reg = /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^[^\s\u4e00-\u9fa5]{6,16}$/;
            if(!reg.test(value)){
                callback(new Error('密码长度需6-16位，且包含字母和字符'));
            }else{
                callback();
            }
        };
        //验证密码是否重复
        let validatePass2 = (rule, value, callback) => {
            if(value !== this.regForm.password){
                callback(new Error('两次密码输入不一致'));
            }else{
                callback();
            }
        };

        return {

            regForm: {
                password: '',
                checkPassword: '',
                expassword:'',
            },

            rules: {
                expassword: [
                    { required: true, message: '请输入旧密码', trigger: 'blur'},

                ],
                password: [
                    { required: true, message: '请输入新密码', trigger: 'blur'},
                    { validator: validatePass1, trigger: 'blur'}
                ],
                checkPassword: [
                    { required: true, message: '请再次输入新密码', trigger: 'blur'},
                    { validator: validatePass2, trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        resetForm(formName){
            this.$refs[formName].resetFields();
        },
        repassword: function() {
                if(this.regForm.password==this.regForm.checkPassword&&this.regForm.password!=""){
                    var params = new URLSearchParams();
                    params.append('account',this.$store.state.user.account );
                    params.append('password',this.regForm.expassword );
                    params.append('repassword',this.regForm.password );
                    var _this = this;
                    axios.post('/user/repassword',params).then(function(res){
                        if(res.data.msg=="用户未注册") {
                            console.log(res.data);
                            alert('用户不存在')
                        }else if(res.data.msg=="成功"){
                            console.log(res.data);
                            _this.$message({
                                type: 'success',
                                message: '修改成功'
                            })
                            _this.$router.go(-1)
                        }else {
                            console.log(res.data);
                            alert('密码错误')
                        }
                    }).catch(function (err) {
                        console.log(err);
                    })
                }else{
                    alert('两次输入的新密码不一样')
                }
            },

//        submitForm(formName){
//            this.$refs[formName].validate((valid) => {
//                if(valid){ //验证通过
//                    api.userRegister(this.regForm)
//                        .then(({ data }) => {
//                            if(data.success){
//                                this.$message({
//                                    type: 'success',
//                                    message:'修改成功'
//                                });
//                            }else{
//                                this.$message({
//                                    type: 'info',
//                                    message: '修改不成功'
//                                });
//                            }
//                        });
//                }else{ //验证不通过
//                    console.log('error submit');
//                    return false;
//                }
//            });
//        }
    }
}
</script>

<style scoped>
    .content img{
        width:1200px;
        margin-top:-2%;
        margin-bottom:2%;
    }
    .box1 {
        width:1200px;
        margin: 0 auto;
        -webkit-box-shadow:1px 1px 15px rgba(144, 144, 144, 1);
        box-shadow:1px 1px 15px rgba(144, 144, 144, 1);
        padding-top: 2%;
        padding-bottom:2%;
    }

    .box2{
        padding-top:2%;
        padding-bottom: 2%;
        margin: 0 auto;
        width:50%;
        -webkit-box-shadow:1px 1px 10px rgba(144, 144, 144, 1);
        box-shadow:1px 1px 10px rgba(144, 144, 144, 1);
    }

</style>